<template>
  <div class="service flex">
    <div class="chat-box">
      <el-tabs
        v-model="editableTabsValue"
        type="border-card"
        closable
        @tab-remove="removeTab"
        @tab-click="tabClick"
        :before-leave="getTabName"
      >
        <el-tab-pane
          :label="item.title"
          :name="item.id"
          v-for="item in userList"
          :key="item.id"
        >
          <chat ref="chat"> </chat>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="tools-box">
      <div class="func common-tool">
        <span>功能:</span>
        <div class="flex align-center">
          <div class="flex align-center" @click="overChat">
            <img src="../../assets/images/end-chat.png" alt="" /> 结束当前会话
          </div>
          <div
            class="flex align-center cursor"
            @click="dialogFormVisible1 = true"
          >
            <img src="../../assets/images/record-feed.png" alt="" />
            记录当前用户反馈
          </div>
        </div>
      </div>
      <div class="used-reply common-tool">
        <span>常用回复:</span>
        <ul>
          <li
            @mouseenter="topShow = index"
            @mouseleave="topShow = 1000"
            class="reply-li"
            v-for="(item, index) in replyMsg"
            :key="index"
            @click="copy(item)"
          >
            <el-tooltip
              popper-class="hover-reply"
              :content="item"
              effect="light"
              visible-arrow="true"
              :enterable="false"
            >
              <div class="reply-click flex between align-center">
                <span class="cell">{{ item }}</span
                ><img
                  class="cursor"
                  @click.stop="goTop(index)"
                  v-show="topShow == index"
                  src="../../assets/images/goTop.png"
                  alt=""
                />
              </div>
            </el-tooltip>
          </li>
        </ul>
        <div class="add-reply" @click="dialogFormVisible = true">添加</div>
      </div>

      <!-- 添加常用回复弹窗 -->
      <!-- <el-dialog
        custom-class="dia-used-reply"
        :modal-append-to-body="false"
        :append-to-body="true"
        :visible.sync="dialogFormVisible"
        @close="closeCheck"
        width="346px"
      > -->
      <div class="model-box" v-show="dialogFormVisible" @click="dialogFormVisible = false">
      </div>
      <div class="dialog-box" v-show="dialogFormVisible">
          <div class="dia-titles flex between align-center">
            <div>添加常用回复</div>
            <div class="cursor" @click="dialogFormVisible = false" style="font-size:28px;color: ##C0C0C0; padding:0 0 5px 0">×</div>
          </div>
          <div class="dia-bodys">
            <span class="db-title">回复内容</span>
            <div>
              <el-input
                type="textarea"
                resize="none"
                placeholder="请输入回复内容"
                v-model="replyContent"
              ></el-input>
              <span class="must flex flex-end">{{ replyCount }}/200</span>
            </div>
          </div>
          <div class="dialog-footer flex flex-end">
            <el-button type="primary" @click="addReply">添加</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >取消</el-button
            >
          </div>
        </div>
      <!-- </el-dialog> -->
    </div>

    <el-dialog
      custom-class="dia-check"
      :visible.sync="dialogFormVisible1"
      width="647px"
    >
      <div slot="title" class="dialog-footer">
        <div class="dia-title flex align-center">
          <img src="../../assets/images/check-dia.png" alt="" />内部记录
        </div>
      </div>
      <div class="dia-body">
        <div>
          <span class="db-title flex flex-end">站点名称:</span>
          <el-input
            class="common-inp"
            type="textarea"
            resize="none"
            placeholder="请输入站点名称"
            v-model="codeInput"
          ></el-input>
        </div>
        <div>
          <span class="db-title flex flex-end">网址:</span>
          <el-input
            class="common-inp"
            type="textarea"
            resize="none"
            placeholder="请输入网址"
            v-model="urlInput"
          ></el-input>
        </div>
        <div style="margin-bottom: 20px">
          <span class="db-title flex flex-end">反馈内容:</span
          ><el-input
            class="feed-inp"
            type="textarea"
            resize="none"
            placeholder="请仔细填写内部反馈信息"
            v-model="contentInput"
          ></el-input>
        </div>
        <div>
          <span class="db-title flex flex-end">联系电话:</span>
          <el-input
            class="common-inp"
            type="textarea"
            resize="none"
            placeholder="请输入电话号码"
            v-model="telInput"
          ></el-input>
        </div>
      </div>

      <div class="dialog-footer flex just-center">
        <el-button class="send-btn" type="primary" @click="sendFeed"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import chat from "../../components/chat.vue";
export default {
  components: {
    chat,
  },
  data() {
    return {
      topShow: 1000,
      replyMsg: [
        "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈123",
        "哈哈哈哈哈哈哈哈哈哈哈哈1",
        "哈哈哈哈哈哈哈哈哈哈哈哈2",
        "哈哈哈哈哈哈哈哈哈哈哈哈3",
        "哈哈哈哈哈哈哈哈哈哈哈哈4",
        "哈哈哈哈哈哈哈哈哈哈哈哈5",
        "哈哈哈哈哈哈哈哈哈哈哈哈6",
        "哈哈哈哈哈哈哈哈哈哈哈哈7",
        "哈哈哈哈哈哈哈哈哈哈哈哈8",
        "哈哈哈哈哈哈哈哈哈哈哈哈9",
        "哈哈哈哈哈哈哈哈哈哈哈哈10",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
        "哈哈哈哈哈哈哈哈哈哈哈哈",
      ],
      userList: [
        {
          title: "用户1",
          id: "123",
        },
        {
          title: "用户2",
          id: "21",
        },
        {
          title: "用户3",
          id: "1",
        },
        {
          title: "用户4",
          id: "5",
        },
      ],
      replyCount: 0,
      replyContent: "",
      dialogFormVisible: false,
      dialogFormVisible1: false,
      editableTabsValue: "1",
      tabIndex: 0,
      tabName: "1",
      sendFeedContent: false,
      codeInput: "",
      urlInput: "",
      contentInput: "",
      telInput: "",
      userName: "",
      selectName: [],
    };
  },

  created() {
    this.editableTabsValue = this.userList[0].id;
    this.tabName = this.userList[0].id;
  },
  methods: {
    /**
     * 添加常用回复
     * */
    addReply() {
      if (this.replyContent == "") {
        this.$notify({
          message: '请输入反馈内容',
          customClass: "notify-reply",
          duration:1500,
          showClose: false,
        });
        return;
      }
      this.dialogFormVisible = false;
      this.replyMsg.push(this.replyContent);
      this.replyContent = "";
    },
    /**
     * 关闭弹窗
     * */
    closeCheck() {
      this.replyContent = "";
    },

    /**
     * 复制常用回复
     * */
    copy(val) {
      this.$refs.chat[this.tabIndex].inputValue = val;
    },

    /**
     * 监听用户tab栏点击
     * */
    tabClick(el) {
      console.log(el);
      console.log("索引", el.index);
      console.log("id", el.name);
      this.tabIndex = el.index;
    },

    /**
     * 删除用户tab栏
     * */
    removeTab(targetName) {
      console.log(targetName);
      console.log(this.selectName);
      if (this.selectName.indexOf(targetName) == -1) {
        this.$message({
          customClass: "message-box",
          message: "请先记录用户反馈再关闭对话框~",
          iconClass: "none",
        });
        return;
      }
      console.log(this.editableTabsValue);
      let tabs = this.userList;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.id === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.id;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.userList = tabs.filter((tab) => tab.id !== targetName);
    },

    /**
     * 常用回复置顶
     */
    goTop(index) {
      this.replyMsg.forEach((el, idx) => {
        if (idx == index) {
          this.replyMsg.splice(idx, 1);
          this.replyMsg.unshift(el);
        }
      });
    },
    /**
     * 发送反馈事件
     */
    sendFeed() {
      if (this.codeInput == "") {
        this.$message.error(`请输入城市代码`);
        return;
      } else if (this.urlInput == "") {
        this.$message.error(`请输入反馈网址`);
        return;
      } else if (this.contentInput == "") {
        this.$message.error(`请输入反馈内容`);
        return;
      }
      let data = {
        ac: "inner_feed",
        username: this.userName,
        city_name: this.codeInput,
        url: this.urlInput,
        feed_content: this.contentInput,
        tel: this.telInput,
      };
      // post("index.php", data).then((res) => {
      //   if (res.data.code == 0) {
      //     this.$message({
      //       message: "反馈内容已提交!",
      //       type: "success",
      //     });
      //     this.codeInput = "";
      //     this.urlInput = "";
      //     this.contentInput = "";
      //     this.telInput = "";
      //   } else {
      //     this.$message.error(`${res.data.msg}`);
      //   }
      // });
      console.log(data);
      this.codeInput = "";
      this.urlInput = "";
      this.contentInput = "";
      this.telInput = "";
      this.sendFeedContent = true;
      this.dialogFormVisible1 = false;
      console.log("tab", this.tabName);
      // this.selectName = this.tabName;
      this.selectName.push(this.tabName);

      // this.userList.push({
      //     title: "用户5",
      //     id: "5212",
      //   })
    },

    overChat() {
      this.$refs.chat[this.tabIndex].msgList.push(
        {
          message:
            "您好，您这边没有其他问题的话，那这边就先申请关闭会话了哦，您后续有什么问题可以随时联系我们",
          myself: true,
          photoSrc: require("../../assets/images/kefu-photo.png"),
        },
        {
          message:
            "感谢您资讯本地宝，稍后我们将关闭本次会话，如果您暂时没有后续问题的话，辛苦您在系统弹出的选项框中点击【同意】，如果我们没有彻底解决您的问题，您还可以通过电话*****联系我们。祝您生活愉快， 事事顺利~",
          myself: true,
          photoSrc: require("../../assets/images/kefu-photo.png"),
        },
        {
          message:
            "<div class='end-title'>您好，请问您是否同意关闭会话？</div><div class='sure-btn flex around'><div>同意</div><div>不同意</div></div>",
          myself: true,
          photoSrc: require("../../assets/images/kefu-photo.png"),
          btn: true,
        }
      );
      this.$refs.chat[this.tabIndex].changeColor =
        this.$refs.chat[this.tabIndex].msgList.length - 1;
      this.$refs.chat[this.tabIndex].scrollBottom();
    },

    getTabName(newVal, old) {
      console.log(newVal);
      this.tabName = newVal;
      this.userList.forEach((val, index) => {
        if (val.id === newVal) {
          console.log(index);
          this.tabIndex = index;
        }
      });
      console.log(this.tabIndex);
    },
  },
};
</script>

<style>
@import "../feed/feed.css";
.chat-box {
  /* width: 80%; */
  width: 73vw;
  min-width: 800px;
  height: 100vh;
}

.tools-box {
  position: relative;
  box-sizing: border-box;
  background-color: #f5f5f5;
  width: 27vw;
  min-width: 330px;
  height: 100vh;
}
.common-tool {
  padding: 10px 0;
  margin: 0 10px;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 400;
  background-color: #fff;
}
.tools-box .func {
  padding: 13px 10px;
  margin: 13px 10px;
}
.tools-box .func span,
.add-reply,
.used-reply > span {
  color: #37c1c3;
}
.used-reply span {
  margin-left: 13px;
  /* margin-left: 13px; */
}
.tools-box .func img {
  margin: 0 7px 0 0;
}
.tools-box .func > div {
  margin: 8px 0 0 0;
}
.tools-box .func > div div:first-of-type {
  margin: 0 16px 0 0;
  cursor: pointer;
}
.tools-box .used-reply {
  height: calc(100vh - 133px);
  margin-top: 10px;
}
.tools-box .used-reply ul {
  padding: 8px 5px 16px 0;
  height: calc(100vh - 210px);
  overflow-y: auto;
}
.reply-li {
  color: #666666;
}
.reply-li:hover {
  background-color: #cdfafa;
}
.add-reply {
  padding: 10px 0 0;
  border-top: 1px solid #d6dadf;
  text-align: center;
}

/* tab标签样式 */
.el-tabs__nav-scroll {
  height: 40px;
  background-color: #fff;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #fff;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item {
  color: #333;
  background-color: #f5f5f5;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-of-type(even) {
  background-color: #fff;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover {
  color: #333333 !important;
}
.el-tabs__item .el-icon-close:before {
  color: #333;
  font-weight: 500;
}

.dia-used-reply {
  border-radius: 5px;
}

.hover-reply {
  width: 240px;
  word-wrap: break-word;
  word-break: break-all;
  border: 1px solid #e1e1e1 !important;
  box-shadow: 0 4px 4px 0 rgba(225, 225, 225, 0.25);
}

.reply-click {
  padding: 3px 13px 3px 0;
  word-wrap: break-word;
  word-break: break-all;
  color: #666666;
}
.reply-click img {
  width: 14px;
  height: 18px;
}
.dialog-box .dia-titles {
  padding: .55rem .85rem;
  border-bottom: 2px solid #f2f2f2;
  background-color: transparent;
  color: #666;
  font-weight: 400;
  font-size: 16px;
}
.dialog-box .dia-bodys {
  padding: 14px;
}
.dialog-box .dia-bodys > div {
  margin-top: 8px;
  border-radius: 4px;
  border: 1px solid #e1e3e9;
}
.dialog-box .db-title{
  color: #666;
}
.dialog-box .dia-bodys .el-textarea__inner {
  height: 131px;
  border: none !important;
}

.dialog-box .dia-bodys .must {
  margin: 0 5px 5px 0;
}

.dialog-box .dialog-footer .el-button {
  padding: 5px;
  margin: 0 7px 0 0;
  border: 1px solid #37c1c3;
  color: #37c1c3;
  background-color: #fff;
}
.dialog-box .dialog-footer {
  padding: 0 20px 10px;
}

.dialog-box .dia-body > div {
  margin-bottom: 15px !important;
}
.send-btn {
  background-color: #37c1c3;
  border: none;
  padding: 11px 30px;
  margin-top: 40px;
  margin-bottom: 20px;
}
.message-box,.message-reply {
  min-width: 0;
  padding: 8px 30px;
  background-color: #37c1c3;
  color: #ffffff !important;
}
.el-message__content {
  color: #ffffff !important;
}

.end-title {
  padding-bottom: 25px;
  margin-bottom: 18px;
  border-bottom: 1px solid #d6dadf;
  font-size: 16px;
  font-weight: 400;
  color: #333;
}
.sure-btn div {
  padding: 7px 25px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  background-color: #f5f5f5;
  color: #333;
}
.sure-btn div:first-of-type {
  background-color: #37c1c3;
  color: #fff;
}

.model-box {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
}

.dialog-box {
  z-index: 1001;
  position: absolute;
  top: 35vh;
  left: 3vw;
  right: 3vw;
  /* margin: 30vh 3vw 0; */
  border-radius: 5px;
  background-color: #fff;
}

.notify-reply{
  width: 200px;
  border: none;
  background-color: #37c1c3;
  color: #fff;
}
.el-notification__content{
  margin: 0;
  color: #fff;
}
</style>